이벤트 동작 등록 안되던 오류 해결

해결 방법 : RestaurantItem.js 내의 아래 코드 삭제

modalContainer.innerHTML = '';
modalContainer.appendChild(content);

modal 웹 컴포넌트에 넣는 detail container가 클릭되기를 원했으나 위에 방법처럼 innerHTML로 slot 자체를 덮어씌워서일까?
detail container가 제대로 렌더링되지 않았고, 이벤트 또한 동작하지 않았다.

아직 정확한 오류 원인 파악은 안됨

이렇게 등록하면 이미지가 깨지는 이슈가 있네요

domain | 도메인 로직, 상태(데이터)를 저장하는 도메인들을 관리

이라는 기준으로 전체적인 코드를 봤을때,
도메인 로직에서 직접 로컬 스토리지에 접근하는 것은 일반적으로 좋지 않는 방법입니다. 도메인 로직이 데이터의 저장 방식에 대해 너무 디펜던시가 있으면 추후 다른 저장 방식으로 변경하고자 할 때 유연성을 떨어뜨립니다. 대신, 데이터 저장 및 로드 로직을 별도의 데이터 계층으로 분리하는 것은 어떨까요?

레스토랑 추가 폼과 동일하게 코드 구조를 가지고 가는데 왜 레스토랑 추가 모달은 정상 작동(요소 접근, 이벤트 동작)하고 디테일 모달은 아무런 이벤트, 접근을 하지 못하는 걸까요?

보통 이벤트 리스너가 달리지 않는 이유는 타이밍 이슈가 대부분 입니다. 웹 컴포넌트가 완전히 로드되고 초기화되기 전에 이벤트 리스너를 추가하거나 요소에 접근하려고 하면 문제가 발생하기 때문에 컴포넌트 생명주기를 확인해보시면 좋을거 같아요. (console.log 등을 이용하면 좋습니다.)

그리고 일부 버블링 캡처링 이슈도 있을수 있는데, 웹 컴포넌트의 이벤트가 바깥으로 전파되지 않거나 외부 이벤트가 컴포넌트 내부로 전파되지 않을 수 있습니다. 이 부분도 같이 확인해보면 좋을거 같아요

추가로, 이렇게 막힐 때는 어떻게 돌파구를 찾아야 할까요? 여러 크루들이 제대로 작동이 안되니까 코드를 갈아엎었다고 하더라고요. 저는 코드를 갈아엎게 되면 이전의 노력들이 다 사라지는 것 같아서, 의미없는 활동이 되어버려서, 다시 시작해야 한다는 막막함이 두려워서, 여러 이유로 코드를 갈아 엎는 것에 반대하는 입장인데 케빈의 생각은 어떤가요~?

코드를 갈아 엎기전에 문제 원인을 명확하게 파악 해보면 좋을거 같아요. 문제의 원인을 정확히 이해하고 있지 않은 상태에서 코드를 처음부터 다시 작성하는 것은 같은 문제를 반복할 수 있습니다.
즉 코드를 갈아엎는건 마지막 수단으로 남겨두고, 최대한 기존 코드에서 해결하려고 노력하되, 구조적인 문제나 설계상 이슈가 확실하면 갈아엎고, 문제 원인을 명확하게 파악이 되면 갈아 엎어도 어떤 구조에 기존 코드가 어디에 들어갈지 명확하게 알 수 있어서 시간을 훨씬 절약할수 있습니다.